<template>
  <div class="pageTitle">
    <div class="left">{{title}}</div>
    <div class="right" v-if="vPageName.length > 0">
      <span>
        <router-link to="/menus">菜单</router-link>
      </span>
      <span v-for="(items,index) in arr" :key="index">
        <router-link :to="items.router" v-if="items.router!=='/'"> / {{items.name}}</router-link>
        <span v-else> / {{items.name}}</span>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "PageTitle",
  props: ["vPageName"],
  data() {
    return {
      arr: [],
      title: ""
    };
  },
  created() {
    if (this.vPageName.length > 0) {
      let arr = this.vPageName.split("/");
      this.title = arr[arr.length - 1].split(",")[0];
      arr.forEach(element => {
        let newArr = element.split(",");
        this.arr.push({
          name: newArr[0],
          router: "/" + newArr[1]
        });
      });
    } else {
      this.title = "菜单";
    }
  },
  methods: {
    change() {}
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/theme/theme";
.pageTitle {
  position: fixed;
  z-index: 999;
  width: calc(100% - 250px);
  height: 55px;
  line-height: 55px;
  border-bottom: 1px solid #cccccc;
  top: 70px;
  left: 250px;
  background-color: @pageTitleBgc;
  box-shadow: 0px 11px 21px 0px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  padding: 0 30px;
  color: #333333;
  display: flex;
  justify-content: space-between;
  .left {
    font-size: 25px;
    font-weight: bold;
  }
  .right {
    font-size: 18px;
    font-weight: 400;
    span {
      color: @pageTitleA2;
    }
    a {
      color: @pageTitleA;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1366px) {
  .pageTitle {
    width: calc(100% - 65px);
    left: 65px;
  }
}
</style>
